<template>
    <div class="inventory-management-page">
      <!-- 搜索筛选栏 -->
      <div class="search-filter-bar" style="">
        <el-form :model="filterForm" class="filter-form">
          <el-row :gutter="32">
            <el-col :span="6">
              <el-form-item label="盘点单号">
                <el-input
                  v-model="filterForm.inventoryNo"
                  placeholder="请输入盘点单号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="盘点结果">
                <el-select
                  v-model="filterForm.inventoryResult"
                  placeholder="请选择盘点结果"
                >
                  <el-option label="盘盈" value="surplus"></el-option>
                  <el-option label="盘亏" value="deficit"></el-option>
                  <el-option label="相符" value="match"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="盘点类型">
                <el-select
                  v-model="filterForm.inventoryType"
                  placeholder="请选择盘点类型"
                >
                  <el-option label="存货盘点" value="inventory"></el-option>
                  <el-option label="资产盘点" value="assets"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="仓库名称">
                <el-select
                  v-model="filterForm.warehouseName"
                  placeholder="请选择仓库名称"
                >
                  <el-option label="货品仓库一" value="warehouse1"></el-option>
                  <el-option label="货品仓库二" value="warehouse2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-button-group">
          <el-button type="primary" @click="searchInventory">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </div>
      </div>
      <!-- 操作按钮栏 -->
      <div class="action-button-bar">
        <el-button type="primary">新增</el-button>
        <el-button>删除</el-button>
        <el-button>导出</el-button>
        <el-button>快速定位</el-button>
        <el-button>刷新</el-button>
      </div>
      <!-- 数据表格 -->
      <el-table :data="inventoryList" border class="inventory-table">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" width="50" type="index"></el-table-column>
        <el-table-column label="盘点单号" prop="inventoryNo"></el-table-column>
        <el-table-column
          label="盘点结果"
          prop="inventoryResult"
        ></el-table-column>
        <el-table-column label="仓库名称" prop="warehouseName"></el-table-column>
        <el-table-column label="盘点类型" prop="inventoryType"></el-table-column>
        <el-table-column label="盘点开始时间" prop="startTime"></el-table-column>
        <el-table-column label="盘点结束时间" prop="endTime"></el-table-column>
        <el-table-column label="出库状态" prop="outboundStatus"></el-table-column>
        <el-table-column label="入库状态" prop="inboundStatus"></el-table-column>
        <el-table-column label="盘点货品" prop="inventoryGoods"></el-table-column>
        <el-table-column
          label="盘点数量"
          prop="inventoryQuantity"
        ></el-table-column>
        <el-table-column label="实际数量" prop="actualQuantity"></el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button size="small" type="danger" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        v-model:current-page="pageInfo.currentPage"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </template>
  <script setup lang="ts">
  import { ElMessageBox, ElTable, ElMessage } from "element-plus";
  import { reactive, onMounted, ref } from "vue";
  import axios from "axios";
  import { Plus } from "@element-plus/icons-vue";
  import { useRouter, useRoute } from "vue-router";
  import dayjs from "dayjs";
  
  // 筛选表单数据
  const filterForm = reactive({
    inventoryNo: "",
    inventoryResult: "",
    inventoryType: "",
    warehouseName: "",
  });
  
  // 数据列表
  const inventoryList = ref<any[]>([]);
  const handleEdit = (row: any) => {
    ElMessage.success(`修改成功！`);
  };
  const handleDelete = (row: any) => {
    ElMessage.success(`删除成功！`);
  };
  // 分页信息
  const pageInfo = reactive({
    currentPage: 1,
    pageSize: 10,
    totalCount: 0,
  });
  
  // 模拟获取盘点数据
  const getInventoryList = async () => {
    // 这里应替换为实际的接口请求，例如使用axios
    // 模拟返回数据
    const mockData = {
      list: [
        {
          inventoryNo: "PCDH0001",
          inventoryResult: "match",
          warehouseName: "warehouse1",
          inventoryType: "inventory",
          startTime: "2024 - 02 - 29",
          endTime: "2024 - 02 - 29",
          outboundStatus: "未出库",
          inboundStatus: "未入库",
          inventoryGoods: "电脑、打印机等",
          inventoryQuantity: 50,
          actualQuantity: 50,
        },
        // 更多模拟数据...
        {
          inventoryNo: "PCDH0002",
          inventoryResult: "match",
          warehouseName: "warehouse1",
          inventoryType: "inventory",
          startTime: "2024 - 02 - 29",
          endTime: "2024 - 02 - 29",
          outboundStatus: "未出库",
          inboundStatus: "未入库",
          inventoryGoods: "电脑、打印机等",
          inventoryQuantity: 50,
          actualQuantity: 50,
        },
        // 更多模拟数据...
        {
          inventoryNo: "PCDH0003",
          inventoryResult: "match",
          warehouseName: "warehouse1",
          inventoryType: "inventory",
          startTime: "2024 - 02 - 29",
          endTime: "2024 - 02 - 29",
          outboundStatus: "未出库",
          inboundStatus: "未入库",
          inventoryGoods: "电脑、打印机等",
          inventoryQuantity: 50,
          actualQuantity: 50,
        },
        // 更多模拟数据...
      ],
      totalCount: 3,
    };
    inventoryList.value = mockData.list;
    pageInfo.totalCount = mockData.totalCount;
  };
  
  // 搜索盘点数据
  const searchInventory = () => {
    // 这里添加实际搜索逻辑，例如传递筛选参数到接口
    getInventoryList();
  };
  
  // 重置筛选表单
  const resetFilter = () => {
    filterForm.inventoryNo = "";
    filterForm.inventoryResult = "";
    filterForm.inventoryType = "";
    filterForm.warehouseName = "";
  };
  
  // 处理每页数量变化
  const handleSizeChange = (newSize: number) => {
    pageInfo.pageSize = newSize;
    pageInfo.currentPage = 1;
    searchInventory();
  };
  
  // 处理当前页变化
  const handleCurrentChange = (newPage: number) => {
    pageInfo.currentPage = newPage;
    searchInventory();
  };
  
  onMounted(() => {
    getInventoryList();
  });
  </script>
  <style scoped>
  .inventory-management-page {
    padding: 10px;
  }
  
  .search-filter-bar {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .form-button-group {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }
  
  .action-button-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  .inventory-table {
    width: 100%;
    margin-bottom: 10px;
  }
  </style>